<template>
	<view class="centers">
		<u-toast ref="uToast" />
		<view v-show="type=='machine'">
			<view class="addTime">
				<view style="padding-left: 30rpx;">
					<view style="font-size: 30rpx; font-weight: bold;">整机允许/禁止使用时段设置</view>
					<view style="color: gray;">对某应用单独设置禁用时间段,若与整机时段重叠,将优先以整机时段为准</view>
				</view>
				<view class="addTime imageClass" @click="gotoTime()">
					<u-icon name="plus" size="50rpx" color="#4b7be2"  ></u-icon>
					<view>添加</view>
				</view>
			</view>
			<view class="work_time">
				<view class="work_top box_radius" v-for="(item, index) in machineTimeList" :key="item"  @longpress.native="toDelMachineTime(item,index)">
					<view class="box box-pack-between box-align-center">
						<view class="left" style="width: 85%;" @click="gotoEditTime(item,index)">
							<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/sj.png" class="work_top clockImg"></image>
							<view class="title font-wSix">{{item.startTime}} - {{item.endTime}}禁用</view>
							<view class="txt">{{item.weekStr}}</view>
						</view>
						<view class="right">
							<u-switch v-model="item.switch" inactive-color="#e2e2e2"  @change="((val)=>{timeChange(val,item, index)})">
							</u-switch>
						</view>
					</view>
				</view>
				<u-line style="margin-top: 20rpx;" />
			</view>
			<view class="tempDiv"></view>
		</view>
		
	<view v-show="type=='app'">
		<view class="addTime">
			<view style="padding-left: 30rpx;">
				<view style="font-size: 30rpx; font-weight: bold;">应用允许/禁止使用时段设置</view>
				<view style="color: gray;">整机禁用时段权重大于应用禁用时段，当有重叠时系统将以整机禁用时段执行</view>
			</view>
			<view class="addTime imageClass" @click="gotoAppTime()">
				<u-icon name="plus" size="50rpx" color="#4b7be2"  ></u-icon>
				<view>添加</view>
			</view>
		</view>
		
		<view class="work_time">
			<view class="work_top box_radius" v-for="(item, index) in appTimeList" :key="item.id"  @longpress.native="toDelAppTime(item)">
				<view class="box box-pack-between box-align-center">
					<view class="left" style="width: 85%;" @click="gotoEditAppTime(item)">
						<image :src="item.app_img" class="work_top clockImg"></image>
						<view class="title font-wSix">{{item.startTime}} - {{item.endTime}}禁用</view>
						<view class="txt">{{item.weekStr}}</view>
					</view>
					<view class="right">
						<u-switch v-model="item.switch" inactive-color="#e2e2e2"  @change="((val)=>{timeChange(val,item, index)})">
						</u-switch>
					</view>
				</view>
			</view>
			<u-line style="margin-top: 20rpx;" />
		 </view>
		</view>
		<view>
			<u-modal v-model="showDelMachine" content="确实删除该闹钟?" @confirm="delMachineTime" :show-cancel-button="true" ></u-modal>
			<u-modal v-model="showDelApp" content="确实删除该闹钟?" @confirm="delAppTime" :show-cancel-button="true" ></u-modal>
			
		</view>
	</view>
</template>

<script>
	import {
		queryTimeControl,
		addTimeControl,
		updateTimeControl,
		delTimeControl,
		delAppTime
	} from '@/api/userHome.js'
	export default {
		data() {
			return {
				machineTimeList: [],
				appTimeList: [],
				mtId: 0,
				type: 'machine',
				showDelMachine: false,
				showDelApp: false,
				delIndex: -1,
				delAppTimeId: -1,
			}
		},
		computed: {
		},
		onLoad(option) {
			this.type = option.type
		},
		onShow() {
			this.getqueryTimeControl()
		},
		methods: {
			gotoEditTime(item, index) {
				let obj = {
					mtId: this.mtId,
					startTime: item.startTime,
					endTime: item.endTime,
					weekdays: item.weekdays,
					switch: item.switch,
					index: index
				}
				let time = encodeURIComponent(JSON.stringify(obj))
				uni.navigateTo({
					url: '/pages_subpackage/timeControl/selectTime/index?time=' + time
				})
			},
			gotoTime() {
				uni.navigateTo({
					url: '/pages_subpackage/timeControl/selectTime/index'
				})
			},
			gotoAppTime() {
				uni.navigateTo({
					url: '/pages_subpackage/timeControl/selectAppTime/index'
				})
			},
			gotoEditAppTime(item) {
				let obj = {
					startTime: item.startTime,
					endTime: item.endTime,
					weekdays: item.weekdays,
					switch: item.switch,
					id: item.id
				}
				let time = encodeURIComponent(JSON.stringify(obj))
				uni.navigateTo({
					url: '/pages/userHome/timeControl/selectAppTime/index?time=' + time
				})
			},
			timeChange(val, item, index) {
				let param = {
					id: uni.getStorageSync('snId'),
					index: index,
					switch: val,
					startTime: item.startTime,
					endTime: item.endTime,
					mtId: this.mtId
				}
				updateTimeControl(param).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						icon: false
					})
				})
				
			},
			//获取设备时间管控
			getqueryTimeControl() {
				queryTimeControl({
					id: uni.getStorageSync('snId'),
				}).then(res => {
					this.machineTimeList = res.data.machineTimeList
					this.mtId = res.data.mtId
					this.appTimeList = res.data.appTimeList
				}).catch(err => {
					
				})
			},
			toDelMachineTime(item,index) {
				this.showDelMachine=true
				this.delIndex=index
			},
			delMachineTime(){
				if(this.delIndex != -1) {
					this.machineTimeList.splice(this.delIndex, 1)
				}
				delTimeControl({
					id: uni.getStorageSync('snId'),
					mtId: this.mtId,
					times: JSON.stringify(this.machineTimeList)
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'false',
						icon: false
					})
				})
			},
			toDelAppTime(item){
				this.showDelApp=true
				this.delAppTimeId=item.id
			},
			delAppTime(){
				delAppTime({
					id: uni.getStorageSync('snId'),
					app_time_id: this.delAppTimeId,
					userId: uni.getStorageSync('userId')
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'false',
						icon: false
					})
				})
				setTimeout(() => {
					this.getqueryTimeControl()
				}, 500)
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>

<style lang="less" scoped>
	.title {
		font-size: 28rpx;
		letter-spacing: 2rpx;
	}

	.txt {
		font-size: 24rpx;
		letter-spacing: 2rpx;
		margin-top: 20rpx;
	}

	.work_top {
		background-color: #FFFFFF;
		padding: 30rpx;
		.footer_time {
			margin-top: 20rpx;
			font-size: 20rpx;
			letter-spacing: 2rpx;
		}
		.clockImg {
			height: 90rpx;
			width: 90rpx;
			float: left;
			padding: 0rpx;
		}
	}

	.addTime {
		display: flex;
		background-color: #FFFFFF;
		align-items: center;
		padding-bottom: 20rpx;
		.imageClass{
		    width: 100rpx;
		    height: 100rpx;
		    margin-left: 70rpx;
		    margin-right: 20rpx;
		    display: flex;
		    flex-direction: column;
		    justify-content: space-between;
		    align-items: center;
		}
	}
	.tempDiv{
		padding: 20rpx;
		background-color: #f2f2f2;
	}
</style>
